<template>
    <div class="page">
        <div class="banner-box">
            <div class="image-box">
                <UserImageP />

                <div class="diy-btn" @click="onDiy">自定义形象</div>
            </div>

            <div class="swiper-banner">
                <swiperP :height="375" :list="BannerList" :onJumpPath="onJumpPath"></swiperP>
            </div>
        </div>

        <!-- 三维营销系统 -->
        <div class="system-cell">
            <div class="system-box">
                <h1 class="system-title">创作你的3D世界，体验未来3D空间</h1>

                <div class="system-example">
                    <div class="system-example__item" v-for="item in SystemList" :key="item.title">
                        <div class="system-example__image">
                            <NuxtImg fit="cover" :src="item.image +
                                '?x-oss-process=image/watermark,image_' +
                                toBase64(
                                    'water/logo_white.png?x-oss-process=image/resize,P_50'
                                ) +
                                ',g_center,t_90/format,webp'
                                " width="257" height="200" loading="lazy" alt="北京华锐云空间" />
                        </div>
                        <div class="system-example__title">
                            {{ item.title }}
                        </div>
                        <div class="system-example__desc">
                            {{ item.desc }}
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 企业案例（PGC） -->
        <div class="case-cell" ref="caseCellRef">
            <div class="case-box">
                <!-- <h2 class="cell-title">企业案例（PGC）</h2> -->
                <!-- <NuxtLink to="/case.html" class="cell-more" rel="nofollow">
                    查看更多>>
                </NuxtLink> -->

                <div class="search-container">
                    <LayoutSearchP />
                </div>

                <template v-if="UpdateList.length">
                    <div class="case-title" id="最近更新">
                        最近更新
                    </div>

                    <div class="case-example is-flex">
                        <CaseItemP :item="item" v-for="item in UpdateList" :key="item.id" :isNew="true" />
                    </div>
                </template>

                <template v-for="(item, index) in CaseList" :key="item.id">
                    <div class="case-title" v-if="item.child.length" :id="item.name">
                        {{ item.name }}
                    </div>
                    <div class="case-example" :class="{
                        'is-flex':
                            item.child.length && !item.child[0].child,
                    }" v-if="item.child.length">
                        <template v-if="item.child[0].child">
                            <div class="case-example__item" v-for="(child, cIndex) in item.child" :key="child.id">
                                <div class="case-example__title">
                                    <img :src="`${_oss_}images/home/tag.png`" />
                                    {{ child.name }}
                                </div>
                                <RadioButtonGroupP v-if="child.child &&
                                    child.child[0] &&
                                    child.child[0].child
                                    " v-model="caseTabActive[index][cIndex]" :list="child.child
        ? child.child.map(
            (item, index) => ({
                label: item.name,
                value: index,
            })
        )
        : []
        " />

                                <div class="case-example__list" :class="{
                                    'is-flex': !(
                                        GetCaseChild(
                                            child,
                                            index,
                                            cIndex
                                        )[0] &&
                                        GetCaseChild(
                                            child,
                                            index,
                                            cIndex
                                        )[0].child
                                    ),
                                    // 'list-3': item.name == '教育元宇宙' && child.name == '管理系统',
                                    'list-2': (item.name == '教育元宇宙' && child.name == '管理系统'),
                                }">
                                    <template v-if="!!child.child
                                        && !!child.child[caseTabActive[index][cIndex]]
                                        && !!child.child[caseTabActive[index][cIndex]].child
                                        && !!child.child[caseTabActive[index][cIndex]].child[0]
                                        && !!child.child[caseTabActive[index][cIndex]].child[0].child">

                                        <RadioButtonGroupP v-model="thirdTabActive[index][cIndex]" :list="child.child[caseTabActive[index][cIndex]].child
                                            ? child.child[caseTabActive[index][cIndex]].child.map(
                                                (item, index) => ({
                                                    label: item.name,
                                                    value: index,
                                                })
                                            )
                                            : []
                                            " style="margin-top: 0;" />

                                        <div class="case-example__list is-flex">
                                            <template v-for="cItem in GetCaseChild(
                                                child,
                                                index,
                                                cIndex,
                                                thirdTabActive[index][cIndex]
                                            )">
                                                <CaseItemP :width="getCaseWidth(item, child)"
                                                    :height="getCaseHeight(item, child)" :item="cItem"
                                                    :line="cItem.is_single == 1" />
                                            </template>
                                        </div>
                                    </template>

                                    <template v-else v-for="cItem in GetCaseChild(
                                        child,
                                        index,
                                        cIndex
                                    )">

                                        <CaseItemP :width="getCaseWidth(item, child)" :height="getCaseHeight(item, child)"
                                            :item="cItem" :line="cItem.is_single == 1" />
                                    </template>
                                </div>
                            </div>
                        </template>
                        <CaseItemP :item="child" :line="child.is_single == 1" :key="child.id" v-for="child in item.child"
                            v-else />
                    </div>
                </template>
            </div>
        </div>

        <!-- 模板库 -->
        <div class="template-cell">
            <div class="template-box">
                <h4 class="cell-title">模板库</h4>
                <NuxtLink to="/template.html" class="cell-more" rel="nofollow">
                    查看更多>>
                </NuxtLink>

                <div class="template-radio">
                    <RadioButtonGroupP line v-model="templateTabActive" :list="templateTabList" />
                </div>

                <!-- 模版分类 -->
                <div class="template-cate-radio" v-show="templateCategoryList[
                    templateTabList[templateTabActive].code
                ] && templateCategoryList[
                    templateTabList[templateTabActive].code
                ].length">
                    <RadioButtonGroupP v-model="templateCategoryActive" :list="templateCategoryList[
                        templateTabList[templateTabActive].code
                    ]
                        " keyName="name" valueName="id" @change="onTemplateCategoryChange" />
                </div>

                <TemplateGroupP :list="TemplateList" v-loading="templateLoad" />
            </div>
        </div>

        <!-- 作品广场 -->
        <div class="works-cell">
            <div class="works-box">
                <h3 class="cell-title">作品广场（UGC）</h3>
                <NuxtLink to="/worksSquare.html" class="cell-more" rel="nofollow">
                    查看更多>>
                </NuxtLink>

                <div class="template-radio">
                    <RadioButtonGroupP line v-model="worksTabActive" :list="worksTabList" />
                </div>

                <div class="template-list" v-loading="worksLoad">
                    <WorksGroupP :list="WorksList" :gap="48" :type="worksTabActive" />
                </div>
            </div>
        </div>

        <!-- 新闻动态 -->
        <div class="news-cell">
            <div class="news-box">
                <h5 class="cell-title">新闻动态</h5>
                <NuxtLink to="/news.html" class="cell-more" rel="nofollow">
                    查看更多>>
                </NuxtLink>

                <div class="news-list">
                    <NewsGroupP :list="NewsList" />
                </div>
            </div>
        </div>
    </div>

    <Teleport to="body">
        <div class="case-navs">
            <div class="nav-list" :class="{ hide: !isExpand }">
                <div class="nav-item" :class="{ active: navActiveId == '最近更新' }" @click="onNavJump('最近更新')">
                    最近<br />更新
                </div>
                <div class="nav-item" :class="{ active: navActiveId == '文旅元宇宙' }" @click="onNavJump('文旅元宇宙')">
                    文旅<br />元宇宙
                </div>
                <div class="nav-item" :class="{ active: navActiveId == '教育元宇宙' }" @click="onNavJump('教育元宇宙')">
                    教育<br />元宇宙
                </div>
                <div class="nav-item" :class="{ active: navActiveId == '商业元宇宙' }" @click="onNavJump('商业元宇宙')">
                    商业<br />元宇宙
                </div>
                <div class="nav-item" :class="{ active: navActiveId == '工业元宇宙' }" @click="onNavJump('工业元宇宙')">
                    工业<br />元宇宙
                </div>
                <div class="nav-item" :class="{ active: navActiveId == '医疗元宇宙' }" @click="onNavJump('医疗元宇宙')">
                    医疗<br />元宇宙
                </div>
            </div>

            <div class="nav-expand" @click="isExpand = !isExpand">
                <el-icon size="24">
                    <ArrowRight v-if="isExpand" />
                    <ArrowLeft v-else />
                </el-icon>
            </div>
        </div>
    </Teleport>
</template>
<script setup>
import { ArrowRight, ArrowLeft } from "@element-plus/icons-vue";
import { useContent } from ".";
const cacheStore = useCacheStore();
const navActiveId = ref(undefined);
const isExpand = ref(false);
const caseCellRef = ref(null);

const {
    BannerList,
    SystemList,
    UpdateList,
    CaseList,
    caseTabActive,
    WorksList,
    TemplateList,
    NewsList,
    templateTabActive,
    templateTabList,
    templateCategoryList,
    templateCategoryActive,
    worksTabActive,
    worksTabList,
    templateLoad,
    worksLoad,
    thirdTabActive,
    onJumpPath,
    onTemplateCategoryChange,
    GetCaseList,
    GetUpdateList,
    GetWorksList,
    GetTemplateList,
    GetNewsList,
    GetBannerList,
    GetCaseChild,
    GetTemplateCategory,
    GetType,
} = useContent();

// 2: 592 * 320  3: 389 * 210  4: 288 * 156
const getCaseWidth = (item, child) => {
    if (item.name == '教育元宇宙' && child.name == '管理系统') {
        return 592;
    }
    // else if (item.name == '工业元宇宙' && child.name == '系统') {
    //     return 592;
    // }
    else {
        return 288;
    }
}

const getCaseHeight = (item, child) => {
    if (item.name == '教育元宇宙' && child.name == '管理系统') {
        return 320;
    }
    // else if (item.name == '工业元宇宙' && child.name == '系统') {
    //     return 320;
    // }
    else {
        return 156;
    }
}

function getElementViewportTopOffset(element) {
    let topOffset = 0;
    while (element) {
        topOffset += element.offsetTop;
        element = element.offsetParent;
    }
    return topOffset;
}

const onDiy = () => {
    navigateTo("/admin.html");
};

const onNavJump = (id) => {
    const node = document.getElementById(id);
    window.scrollTo({
        left: 0,
        top: getElementViewportTopOffset(node) - 90,
        behavior: "smooth",
    });
}

const onScroll = () => {
    const scrollHeight = document.documentElement.scrollTop || document.body.scrollTop;
    const navList = ["最近更新", "文旅元宇宙", "教育元宇宙", "商业元宇宙", "工业元宇宙", "医疗元宇宙"];

    let isContainer = false;
    for (let id of navList) {
        if (scrollHeight >= getElementViewportTopOffset(document.getElementById(id)) - 90) {
            navActiveId.value = id;
            isContainer = true;
        }
    }

    if (!isContainer || scrollHeight > caseCellRef.value.clientHeight + getElementViewportTopOffset(caseCellRef.value) - 90) {
        navActiveId.value = undefined;
    }
}

onMounted(() => {
    window.addEventListener('scroll', onScroll)
})

onBeforeUnmount(() => {
    window.removeEventListener('scroll', onScroll);
})

await GetType();

watch(() => cacheStore.key, async () => {
    await GetType();
    GetTemplateCategory();
    GetUpdateList();
    GetBannerList(117);
    GetWorksList(8);
    GetTemplateList();
    GetNewsList();
    GetCaseList();
})

await Promise.all([
    GetTemplateCategory(),
    GetUpdateList(),
    GetBannerList(117),
    GetWorksList(8),
    GetTemplateList(),
    GetNewsList(),
    GetCaseList(),
]);
</script>
<style lang="scss" scoped>
.banner-box {
    width: 1200px;
    display: flex;
    margin: 0 auto;

    .image-box {
        width: 240px;
        height: 350px;
        flex-shrink: 0;
        padding: 10px;

        .diy-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 34px;
            background-color: #5085fb;
            color: #fff;
            border-radius: 4px;
            margin-top: 10px;
            font-size: 16px;
            cursor: pointer;
        }
    }

    .swiper-banner {
        width: 960px;
        border-radius: 10px;
        overflow: hidden;
        margin-top: 10px;
    }
}

.search-container {
    margin-bottom: 30px;

    .search-box {
        margin: 0 auto;
    }

    // &.fixed {
    //     top: 80px;
    //     position: fixed;
    // }

    // .search-box {
    //     width: 600px;
    //     height: 40px;
    //     margin: 0;

    //     :deep() {
    //         input {
    //             height: 28px;
    //             font-size: 14px;

    //             &::placeholder {
    //                 font-size: 14px;
    //             }
    //         }

    //         .search-btn {
    //             height: 36px;
    //             font-size: 16px;
    //             border-radius: 8px;
    //         }
    //     }
    // }
}

.fade-in {
    transform: translate3d(0, 0, 0) !important;
    opacity: 1 !important;
}

.fade-init {
    transform: translate3d(0, 50px, 0);
    opacity: 0;
    transition: all 0.8s linear;
}

.page {
    background-color: #f5f6fa;
}

.cell-title {
    color: #111;
    text-align: center;
    font-size: 30px;
    font-weight: bold;
    margin-bottom: 40px;
}

.cell-more {
    position: absolute;
    right: 0;
    top: 8px;
    color: #5085fb;
    cursor: pointer;
    text-decoration: none;
}

.system-cell {
    padding: 60px 0;

    .system-box {
        width: 1200px;
        margin: 0 auto;
        text-align: center;

        .system-title {
            font-size: 46px;
            line-height: 1em;
            font-weight: bold;
            color: #111;
            margin: 0;
        }

        .system-desc {
            margin-top: 19px;
            font-size: 16px;
            color: #666;
            line-height: 21px;
        }

        .system-example {
            display: flex;
            margin-top: 48px;

            &__image {
                width: 257px;
                height: 200px;
                overflow: hidden;

                img {
                    transition: all 0.4s linear;

                    &:hover {
                        transform: scale(1.4);
                    }
                }
            }

            &__item {
                width: 277px;
                margin-right: 30px;
                padding: 10px;
                border-radius: 4px;
                background-color: #fff;
                box-shadow: 0px 0px 10px 0px rgba(1, 23, 86, 0.1);

                &:last-of-type {
                    margin-right: 0;
                }
            }

            &__title {
                font-size: 18px;
                color: #111;
                font-weight: 600;
                text-align: center;
                margin-top: 12px;
            }

            &__desc {
                font-size: 14px;
                margin-top: 9px;
                color: #666;
            }
        }
    }
}

.case-cell {
    padding: 41px 0 0;
    background-color: #fff;

    .case-box {
        position: relative;
        width: 1200px;
        margin: 0 auto;

        .cell-title-2 {
            position: relative;
            padding-left: 12px;
            color: #5085fb;
            line-height: 20px;
            user-select: none;

            &::after {
                content: "";
                width: 4px;
                height: 100%;
                position: absolute;
                left: 0;
                top: 0;
                background-color: #5085fb;
                border-radius: 2px;
                overflow: hidden;
            }
        }

        .case-title {
            font-size: 26px;
            font-weight: bold;
            margin-bottom: 20px;
            color: #333;
        }

        .case-example {
            &__title {
                display: flex;
                align-items: center;
                font-size: 20px;
                color: #5085fb;

                img {
                    width: 20px;
                    height: 20px;
                    margin-right: 10px;
                }
            }

            .radio-button-group {
                margin-top: 20px;
            }

            &.is-flex {
                display: flex;
                flex-wrap: wrap;
            }

            &__list {
                margin-top: 20px;

                &.is-flex {
                    display: flex;
                    flex-wrap: wrap;
                }

                &.list-3 {
                    :deep(.case-item) {
                        width: 389px;

                        &:nth-of-type(3n) {
                            margin-right: 0px;
                        }

                        &:nth-of-type(4n) {
                            margin-right: 16px;
                        }
                    }
                }

                &.list-2 {
                    :deep(.case-item) {
                        width: 592px;

                        &:nth-of-type(2n) {
                            margin-right: 0px;
                        }
                    }
                }
            }
        }
    }
}

.works-cell {
    padding: 40px 0;
    background-color: #fff;

    .works-box {
        width: 1200px;
        margin: 0 auto;
        position: relative;
    }
}

.template-cell {
    padding: 40px 0;

    .template-box {
        width: 1200px;
        margin: 0 auto;
        position: relative;
    }

    .template-radio {
        margin-bottom: 20px;
    }

    .template-cate-radio {
        margin-bottom: 20px;
    }
}

.news-cell {
    padding: 60px 0;

    .news-box {
        width: 1200px;
        margin: 0 auto;
        position: relative;
    }
}

.case-navs {
    position: fixed;
    right: 45px;
    top: 50%;

    transform: translateY(-50%);
    font-size: 12px;
    z-index: 9;

    .nav-expand {
        padding: 6px;
        color: #333;
        margin-bottom: 10px;
        border-radius: 4px;
        background-color: #fff;
        cursor: pointer;
        text-align: center;
        box-shadow: 0px 0px 10px 0px rgba(1, 23, 86, 0.1);

        &:hover {
            color: #fff;
            background-color: #0173d6;
            box-shadow: 0px 0px 10px 0px rgba(1, 23, 86, 0.1);
        }
    }

    .nav-list {

        &.hide {
            display: none;
        }

        .nav-item {
            padding: 6px;
            color: #333;
            margin-bottom: 10px;
            border-radius: 4px;
            background-color: #fff;
            cursor: pointer;
            text-align: center;
            box-shadow: 0px 0px 10px 0px rgba(1, 23, 86, 0.1);

            &.active,
            &:hover {
                color: #fff;
                background-color: #0173d6;
                box-shadow: 0px 0px 10px 0px rgba(1, 23, 86, 0.1);
            }
        }
    }
}
</style>
